<template>
  <div id="user" :class="['copy', judgeWidth ]">
    <div class="login com">
      <div>
      <span>
        <router-link to="/user">
          <div class="userC">
            <img src="/image/user.png" alt="user" v-show="!login">
            <img src="/image/userlogin.png" alt="user" class="userT" v-show="login">
            <div class="userCard" v-show="login">
              <span>{{ user }}</span>
              <span class="userOut" @click="logout">&nbsp;&nbsp;&nbsp;退出</span>
            </div>
          </div>
        </router-link>
      </span>
      </div>
    </div>
    <div class="illustrated com"></div>
    <div class="hotEvent com"></div>
    <div class="subsidize com"></div>
    <div></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { removeStore } from "../untils/storage";

export default {
  name: "Users",
  data() {
    return {
      windowWidth: this.$store.state.screenWidth
    }
  },
  methods: {
    logout() {
      removeStore('token');
      removeStore('id');
      window.location.href = '/';
    }
  },
  computed: {
    ...mapState(['login', 'user']),
    judgeWidth(){
      if(this.windowWidth > 800) {
        return "comBig"
      } else {
        return "mobile-com"
      }
    },
  },
  mounted() {
    let that = this;
    window.onresize=function() {
      that.$store.state.screenWidth = document.documentElement.clientWidth;     //窗口宽度
      that.$store.state.screenHeight = document.documentElement.clientHeight;     //窗口高度
    }
  },
  watch: {
    '$store.state.screenWidth': function (val) {        //监听屏幕宽度变化
      this.windowWidth = val;
    }
  },
}
</script>

<style lang="scss" scoped>
@import "../assets/style/common";

@keyframes tra {
  0% {}
  100% { width: 104%; }
}

#user {
  height: 100%;
  position: absolute;
  left: 0;
  z-index: 99;
  .login {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      a {
        color: #f0f0f0;
      }
      .userC {
        .userT {
          position: absolute;
          left: 20%;
          top: 30%;
        }
        .userCard {
          position: absolute;
          left: 45%;
          top: 40%;
          .userOut {
            color: #555355;
            font-size: 10px;
          }
          .userOut:hover {
            color: whitesmoke;
            font-size: 20px;
          }
        }
      }
    }
  }
}

.comBig {
  width: 18%;
}

.mobile-com {
  display: none;
}

.com {
  height: 25%;
  //border: 1px solid;
  border-radius: 0 2% 2% 0 / 0 3% 3% 0;
  box-sizing: border-box;
  background-color: #3d4444;
  background-image: linear-gradient(90deg, #3d4444 0%, #555355 100%);
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}
.com:hover {
  animation: tra 0.3s linear forwards;
}
</style>